<template>
  <div class="view">
    <div class="usertop flexc">
      <span class="flex title">{{$t('cpuNet.managingRentalTerm')}}</span>
    </div>
    <div class="ram">
      <div class="zjType flexb">
        <div class="tab" v-for="(item, index) in activeList"
        :key="index"
        :class="{'active': activeIndex === item.id}"
        @click="handleActiveMenu(item.id)">
          {{item.label}}
        </div>
      </div>
      <!-- 增加期限 / 减少期限-->
      <div class="pd8px" v-if="adminItem">
        <!-- 已续租期限 -->
        <div class="right rentRenewed">{{$t('cpuNet.renewedTerm')}}{{ rentRenewed }}{{$t('cpuNet.day')}}</div>
        <!-- 续租期限 -->
        <div class="term flexb">
          <div class="termWord" v-if="activeIndex === 1">{{$t('cpuNet.increaseDuration')}}</div>
          <div class="termWord" v-else>{{$t('cpuNet.reduceDuration')}}</div>
          <div class="cycle">
            <el-input-number v-model="numValue" :min="numMin" :max="numMax" :step="30" step-strictly size="large" @change="handleChange">
            </el-input-number>
            <div class="mask">{{ numValue }} {{$t('cpuNet.day')}}</div>
          </div>
        </div>
        <div class="right rentRenewedTotal" v-if="activeIndex === 1">
          {{$t('cpuNet.totalRenewalTerm')}}{{ rentRenewed + numValue }}{{$t('cpuNet.day')}}
        </div>
        <div class="right rentRenewedTotal" v-else>
          {{$t('cpuNet.restRenewalTerm')}}{{ rentRenewed - numValue }}{{$t('cpuNet.day')}}
        </div>
        <!-- 增加租金 / 退还租金 -->
        <div class="term term1 flexb">
          <div class="termWord" v-if="activeIndex === 1">{{$t('cpuNet.increaseRent')}}</div>
          <div class="termWord" v-else>{{$t('cpuNet.rentRefund')}}</div>
          <div class="cycle">
            <el-input v-model="payMoney" disabled></el-input>
          </div>
        </div>
        <!-- 余额 / 可减少租金 -->
        <div class="right reduceBalance" v-if="activeIndex === 1">
          EOS {{$t('myWallet.balance')}}：{{eosBalance}}
        </div>
        <div class="right reduceBalance" v-else>
          {{$t('cpuNet.rentRenewal')}}：{{adminItem.balance}}
        </div>
        <el-button class="qrbtn"
        @click="handleSubmit"
        v-loading="loading">
          {{$t('public.sure')}}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { EosModel } from '@/utils/eos';
import { toFixed } from '@/utils/validate';

export default {
  name: 'admin', // 管理租借费用
  data() {
    return {
      cycle: 30, // 续租周期
      loading: false,
      activeIndex: 1, // 1增加期限 、2减少期限
      activeList: [
        {
          id: 1,
          label: this.$t('cpuNet.increaseDuration')
        },
        {
          id: 2,
          label: this.$t('cpuNet.reduceDuration')
        }
      ],
      payMoney: '0.0000 EOS', // 存入额度 / 取回额度
      numValue: 0, // 租借周期表面显示值
      numMax: 9999999999,
      numMin: 0,
      rentRenewed: 0, // 已续租期限
    }
  },
  props: {
    adminVisible: {
      type: Boolean,
      default: false,
    },
    adminItem: Object,
    eosBalance: String,
    symbolScience: String,
    fundBalance: Number, // 储备金余额
  },
  watch: {
    adminVisible: function change(val) {
      // this.$emit('listenAdmin');
      this.loading = false;
      this.payMoney = '0.0000 EOS';
      this.activeIndex = 1;
      this.numValue = 0; // 租借周期表面显示值
      this.numMax = 9999999999;
      this.numMin = 0;
      if (val) {
        this.handleActiveMenu(1)
      }
    },
    '$store.state.app.language': function change() {
      this.activeList = [
        {
          id: 1,
          label: this.$t('cpuNet.increaseDuration')
        },
        {
          id: 2,
          label: this.$t('cpuNet.reduceDuration')
        }
      ]
    },
  },
  created() {
  },
  mounted() {
    this.handleActiveMenu(1)
  },
  methods: {
    handleSubmit() {
      const params = {
        loan_num: this.adminItem.loan_num,
        type: this.adminItem.type,
        way: this.activeIndex, // 1存 2取
        amount: 0,
      }
      const payMoney = this.payMoney;
      if (this.activeIndex === 1) { // 存
        if (parseFloat(payMoney, 0) === 0) {
          this.$message.error(this.$t('cpuNet.notYetExtended'));
          return;
        }
        // 余额是否够
        if (parseFloat(payMoney, 0) > parseFloat(this.eosBalance, 0)) {
          this.$message.error(this.$t('jy.error3'));
          return;
        }
        params.payment = payMoney;
        params.amount = payMoney;
      } else { // 取
        if (parseFloat(payMoney, 0) === 0) {
          this.$message.error(this.$t('cpuNet.unreducedDeadline'));
          return;
        }
        // 取回金额不足
        // if (parseFloat(payMoney, 0) > parseFloat(this.adminItem.balance, 0)) {
        //   this.$message.error('可取回的续租租金不足');
        //   return;
        // }
        params.defAmount = payMoney;
      }
      this.loading = true;
      EosModel.cpuOperationTransaction(params, (res) => {
        this.loading = false;
        if (res && res.broadcast) {
          this.$message.success(this.$t('newpos.successfulOperation'));
          this.confirmVisible = false;
          this.$emit('listenAdmin', 'refresh');
          return;
        }
        EosModel.handleScatterErrorBack(res);
      })
    },
    // 租借周期点击事件
    handleChange(value) {
      this.numValue = value;
      const payment = parseFloat(this.adminItem.payment, 0);
      if (this.activeIndex === 1) {
        this.numMax = 9999999999;
        const zq = (this.numValue - this.numMin) / this.cycle;
        this.payMoney = `${toFixed(zq * payment, 4)} ${this.symbolScience}`;// 增加的租金
        if (this.numValue === this.numMin) {
          this.payMoney = `0.0000 ${this.symbolScience}`
        }
      }
      if (this.activeIndex === 2) {
        const paynum = (value / this.cycle) * payment;
        this.payMoney = `${toFixed(paynum, 4)} ${this.symbolScience}`;// 减少的租金
      }
    },
    // 切换
    handleActiveMenu(val) {
      this.activeIndex = val;
      this.numValue = 0;
      this.payMoney = '0.0000 EOS';
      const kq = parseFloat(this.adminItem.balance, 0);
      const payment = parseFloat(this.adminItem.payment, 0);
      this.rentRenewed = Math.floor(kq / payment) * this.cycle;
      if (this.activeIndex === 1) {
        this.numMax = 9999999999;
      }
      if (this.activeIndex === 2) {
        // this.numValue = Math.floor(kq / payment) * this.cycle;
        this.numMax = Math.floor(kq / payment) * this.cycle;
      }
    },
    /*
    * 进度格式化
    * @params numb Number
    * @p 保留小数后几位
    */
    toFixed(numb, p) {
      return toFixed(numb, p);
    },
  }
}
</script>

<style scoped lang="scss">
@import '@/views/myWallet/user.scss';
@import '@/assets/css/variables.scss';
@import '@/views/myWallet/eosResource/resource.scss';

.mcbtn, .mrbtn {
  height: 40px;
  font-size: 14px;
}

.mrbtn {
  width: 100%;
  color: #fff;
  background-color: $-btn-green;
  border-color: $-btn-green;
  -webkit-box-shadow: -1px 0 0 0 $-btn-green;
  box-shadow: -1px 0 0 0 $-btn-green;
}
.mcbtn {
  width: 100%;
  color: #fff;
  background-color: $-btn-red;
  border-color: $-btn-red;
  -webkit-box-shadow: -1px 0 0 0 $-btn-red;
  box-shadow: -1px 0 0 0 $-btn-red;
}

.qrbtn {
  width: 100%;
  color: #fff;
  background-color: $-btn-blue;
  border-color: $-btn-blue;
  -webkit-box-shadow: -1px 0 0 0 $-btn-blue;
  box-shadow: -1px 0 0 0 $-btn-blue;
}

.zjType {
  .tab {
    position: relative;
    display: inline-block;
    width: 45%;
    padding: 10px 0;
    border-radius: 3px;
    color: #333;
    border: 1px solid #e4e7ed;
    text-align: center;
    cursor: pointer;
  }

  .tab:first-child {
    margin-right: 15px;
  }

  .active {
    color: $-btn-blue;
    border-color: $-btn-blue;
  }
}

.view{
  box-shadow: none;
  .usertop {
    font-size: 18px;
    padding-top: 0;
    text-align: center;

    &::before {
      display: none;
    }
  }
  .ram{
    padding: 10px 50px 20px 50px;
  }

  .tip2 {
    padding-left: 75px;
  }

  /deep/ .el-button {
    padding: 12px 20px;
  }

  .rentRenewed {
    color: #999;
    margin-top: 20px;
  }

  .rentRenewedTotal {
    color: #999;
    margin-top: 5px;
  }

  .term {
    margin-top: 10px;

    &.term1 {
      margin: 10px 0 10px 0;
    }

    .termWord {
      flex: 1;
    }

    .cycle {
      flex: 2;
      width: 235px;
      min-width: 235px;
      position: relative;

      /deep/ .el-input-number {
        width: 100%;
      }

      .mask {
        position: absolute;
        width: 152px;
        height: 38px;
        left: 41px;
        top: 1px;
        background: #fff;
        z-index: 10;
        text-align: center;
        line-height: 38px;
      }
    }
  }

  .reduceBalance {
    margin-bottom: 30px;
  }
}
.theme-1B1D27{
  .zjType {
    .tab {
      color: rgba(255, 255, 255, 0.5);
      border-color: RGBA(197, 206, 228, 0.3);
    }
    .tab.active {
      color: $-btn-blue;
      border-color: $-btn-blue;
    }
  }
  .mask {
    background: #152247 !important;
  }
}
</style>
